<template>
    <div class="msj_spellpindetail">
        <div class="msj_spellpindetail_c">
            <p>拼团</p>
            <ul>
                <li>
                    <div class="msj_spellpindetail_lis">
                        <span>已成团</span>
                    </div>
                    <div>
                        <h4>数量</h4>
                        <h4>{{ chengnum }}</h4>
                    </div>
                </li>
                <li>
                    <div class="msj_spellpindetail_lis">
                        <span style="background:#378BC9;">拼团中</span>
                    </div>
                    <div>
                        <h4>数量</h4>
                        <h4>{{ pinnum }}</h4>
                    </div>
                </li>
            </ul>
            <p>订单</p>
            <ul>
                <li>
                    <div class="msj_spellpindetail_lis" style="display:flex; justify-content: space-between;">
                        <span style="background:#378BC9;">今日成交</span>
                        人均消费:￥0.00
                    </div>
                    <div class="msj_dingdan">
                       <div>
                            <h4>成交量</h4>
                            <h4>0</h4>
                       </div>
                       <div>
                            <h4>成交额</h4>
                            <h4>￥ 0.00</h4>
                       </div>
                    </div>
                </li>
                <li>
                    <div class="msj_spellpindetail_lis" style="display:flex; justify-content: space-between;">
                        <span >昨日成交</span>
                        人均消费:￥0.00
                    </div>
                    <div class="msj_dingdan">
                       <div>
                            <h4>成交量</h4>
                            <h4>0</h4>
                       </div>
                       <div>
                            <h4>成交额</h4>
                            <h4>￥ 0.00</h4>
                       </div>
                    </div>
                </li>
                <li>
                    <div class="msj_spellpindetail_lis" style="display:flex; justify-content: space-between;">
                        <span style="background:#CF9C00;">近7日成交</span>
                        人均消费:￥0.00
                    </div>
                    <div class="msj_dingdan">
                       <div>
                            <h4>成交量</h4>
                            <h4>0</h4>
                       </div>
                       <div>
                            <h4>成交额</h4>
                            <h4>￥ 0.00</h4>
                       </div>
                    </div>
                </li>
                <li>
                    <div class="msj_spellpindetail_lis" style="display:flex; justify-content: space-between;">
                        <span style="background:#d00e0e;">近一个月成交</span>
                        人均消费:￥0.00
                    </div>
                    <div class="msj_dingdan">
                       <div>
                            <h4>成交量</h4>
                            <h4>0</h4>
                       </div>
                       <div>
                            <h4>成交额</h4>
                            <h4>￥ 0.00</h4>
                       </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {getmsjpinspstate} from '@/utils/api'
export default {
    name: 'PhaemacySpellpindetail',

    data() {
        return {
            chengnum:0,
            pinnum:0
        };
    },
    created(){
        getmsjpinspstate().then(res=>{
            let data=res.data.data 
            this.chengnum=data.filter(v=>v.state=='成功').length
            this.pinnum=data.length
        })
    },
    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style  scoped>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
    .msj_spellpindetail{
        width: 100%;
        margin: 20px 0 0;
        box-sizing: border-box;
        padding: 5px 5px 0;
        background: #eee;
    }
    .msj_spellpindetail_c{
        width: 100%; box-sizing: border-box;
        padding: 10px 15px;
        background: #fff;
    }
    .msj_spellpindetail_c p{
        margin-bottom: 15px;
        font-size: 13px;
    }
    .msj_spellpindetail_c ul{
        width: 100%; display: flex;
        flex-wrap: wrap; 
        justify-content: space-between;
    }
    .msj_spellpindetail_c ul li{
        width: 48%;margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .msj_spellpindetail_lis{
        width: 100%;font-size: 13px;
        box-sizing: border-box;
        padding: 8px 12px; color: #666;
        background: #eee;
    }
    .msj_spellpindetail_lis span{
        
        background: #44A343;
        padding: 1px 3px; color: #fff;
    }
    .msj_spellpindetail_c ul li h4{
        padding: 10px 0 5px; text-align: center;
    }

    .msj_dingdan{
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 10px;
    }
    .msj_dingdan div{
        width: 50%;

    }
    .msj_dingdan div:nth-child(2){
        border-left: 1px solid #eee;
    }
    .msj_dingdan div:nth-child(2) h4:nth-child(2){
        color:#f26e6e;
    }
</style>